<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax初步使用</title>
</head>
<body>
    <div class="box">
        <!-- <p>key名为xxx,value值为xxx</p> -->
    </div>
    <script>
        let box = document.querySelector('.box');

        /* 创建、配置、发送、获取 */
        var xhr = new XMLHttpRequest();
        xhr.open("GET","./01_ajax.php");
        xhr.send();
        xhr.onreadystatechange = function(){
            // 状态码为4时，获取响应内容
            if(xhr.readyState === 4){
                var obj = JSON.parse(xhr.responseText);
                // 渲染到div标签
                var html = '';
                for(var attr in obj){
                    html += `
                        <p>key名为${attr},value值为${obj[attr]}</p>
                    `;
                }
                box.innerHTML = html;
            }
        }

    </script>
</body>
</html>